<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>频谱分析工具</title>
  <link rel="stylesheet" type="text/css" href="./plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="./plugin/leaflet-1.0.3/leaflet.css">
  <link rel="stylesheet" type="text/css" href="./plugin/leaflet-plugin/Leaflet.Coordinates/Leaflet.Coordinates-0.1.5.css">
  <link href="./plugin/city-picker/css/city-picker.css" rel="stylesheet" type="text/css" />
  <link href="./plugin/bootstrap-datetimepicker-4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" type="text/css" href="./css/app.css">
  <style type="text/css">
    .leaflet-marker-icon,
    .leaflet-marker-shadow,
    .leaflet-image-layer,
    .leaflet-pane>svg path,
    .leaflet-tile-container {
      pointer-events: visible;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="top-bar" id="tab_box">
      <div class="top-bar__tab active" data-content="totalFreq">总频点数</div>
      <div class="top-bar__tab" data-content="upFlow">上行流量分布</div>
      <div class="top-bar__tab" data-content="downFlow">下行流量分布</div>
      <div class="top-bar__tab" data-content="totalFlow">总流量</div>
    </div>
    <div class="main-content">
      <div class="left-mapbox" id="map_box">
        <div class="map leaflet-grab" id="map"></div>
        <img class="can-img" id="circle" src="./image/circle8x8.png" alt="圆形">
      </div>
      <div class="right-info">
        <form class="right-head" id="form">
          <div class="form-group city-group">
            <input name="city" readonly type="text" id="cityPicker">
          </div>
          <div class="form-group">
            <div class="input-group date">
              <select class="form-control" name="date" id="datePicker" disabled>
                <option value="">请选择...</option>
              </select>
              <!-- <input type='text' name="date" class="form-control">
              <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
              </span> -->
            </div>
          </div>
          <div class="form-group R">
            <button class="btn btn-default" type="button" id="query">查询</button>
          </div>
        </form>
        <div class="right-content active" id="totalFreq">
          <h4 class="content-title">总频点数（个）</h4>
          <div class="chart" id="totalfreqChart"></div>
          <div class="chart-foot">
            <span>物理小区总数：</span>
            <span id="totalfreqCount"></span>
          </div>
        </div>
        <div class="right-content" id="upFlow">
          <h4 class="content-title">上行流量分布（GB）</h4>
          <div class="chart" id="upChart"></div>
          <div class="chart-foot">
            <span>物理小区总数：</span>
            <span id="upflowCount"></span>
          </div>
        </div>
        <div class="right-content" id="downFlow">
          <h4 class="content-title">下行流量分布（GB）</h4>
          <div class="chart" id="downChart"></div>
          <div class="chart-foot">
            <span>物理小区总数：</span>
            <span id="downflowCount"></span>
          </div>
        </div>
        <div class="right-content" id="totalFlow">
          <h4 class="content-title">总流量（GB）</h4>
          <div class="chart" id="totalflowChart"></div>
          <div class="chart-foot">
            <span>物理小区总数：</span>
            <span id="flowCount"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="./plugin/jQuery/jquery-3.3.1.min.js"></script>
  <script src="./plugin/city-picker/js/city-picker.data.js" type="text/javascript"></script>
  <script src="./plugin/city-picker/js/city-picker.js" type="text/javascript"></script>
  <script src="./plugin/momentjs/moment.js" type="text/javascript"></script>
  <script src="./plugin/bootstrap-datetimepicker-4.17.47/js/bootstrap-datetimepicker.min.js"></script>
  <script src="./plugin/bootstrap-datetimepicker-4.17.47/js/zh-cn.js"></script>
  <script src="./plugin/echarts4/echarts.min.js"></script>
  <script src="./plugin/easeljs/easeljs-0.7.1.min.js"></script>
  <script src="./plugin/leaflet-1.0.3/leaflet-src.js"></script>
  <script src="./plugin/d3/d3.v3.js"></script>
  <script src="./plugin/leaflet-plugin/leaflet.ChineseTmsProviders.js"></script>
  <script src="./plugin/leaflet-plugin/Leaflet.Coordinates/Leaflet.Coordinates-0.1.5.min.js"></script>
  <script src="./plugin/leaflet-plugin/gLayers.Leaflet-master/L.CanvasLayer.js"></script>
  <script src="./plugin/leaflet-plugin/Leaflet.D3SvgOverlay-2.2/L.D3SvgOverlay.min.js"></script>
  <script src="./plugin/jquery-plugin/jquery.serializejson.min.js"></script>
  <script src="./js/util.js"></script>
  <script src="./js/mapUtil.js"></script>
  <!-- <script src="./js/mapClass.js"></script> -->
  <!-- <script src="./js/global.js"></script> -->
  <!-- <script src="./js/yGlobal.js"></script> -->
  <!-- <script src="./js/gStationList.js"></script> -->
  <script src="./js/9yueStationList.js"></script>
  <!-- <script src="./js/gCellList.js"></script> -->
  <script src="./js/gCellList20181210.js"></script>
  <script src="./js/gExcludeStationList.js"></script>
  <script src="./js/gDateList.js"></script>
  <script src="./js/map.js"></script>
  <script src="./js/app.js"></script>
</body>

</html>